<template>
    <el-menu :collapse="sidebar" :default-active="$route.fullPath" class="el-menu-vertical-demo" background-color="#545c64"
        text-color="#fff" active-text-color="#ffd04b" unique-opened router>
        <el-sub-menu v-for="item in routes" :index="item.path" :key="item.path"
            :style="!sidebar ? 'min-width:200px' : 'min-width:none'">
            <template #title>
                <i class="iconfont" :class="item.meta.icon"></i>
                <span>{{ item.meta.title }}</span>
            </template>
            <el-menu-item v-for="i in item.children" :index="item.path + '/' + i.path" :key="item.path + '/' + i.path">
                {{ i.meta.title }}
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>



<script lang="ts" >
// 按需加载 vuex
import { useStore } from 'vuex';
// 按需引入 vue-router
import { useRouter } from 'vue-router';
import { defineComponent, reactive, ref, computed } from 'vue';


export default defineComponent({
    name: "MyNav",
    setup() {
        // 路由表进行初始化  
        let routes: Array<any> = reactive([]);
        //初始化router 
        let router = useRouter();
        // 初始化 vuex
        let store = useStore();
        // let sidebar = ref();

        router.options.routes.forEach((item) => {
            if (item.meta) {
                routes.push(item);
            }
        })

        //  computed
        let sidebar = computed(() => {
            return store.getters.sidebar
        })

        return { routes, sidebar }
    }
})

/*
vue-router 3 和 4 的不同：
1.路由模式  ，在 4当中  hash 模式：   history: createWebHashHistory(),//hash模式
2.useRouter   相当于  this.$router;  useRoute  相当于 this.$route
*/
</script>

<style lang="less" scoped>
.el-menu {
    border-right: none;
}

span {
    margin: 10px;
}
</style>